<template>
  <view class="kaobuguo_container">
    <navbar title="激活权益"></navbar>
    <view class="row">
      <view class="label">权益开始</view>
      <view class="f1">
        <view class="input">
          明天
        </view>
      </view>
    </view>
    <view class="divider"></view>
    <view class="row">
      <view class="label">权益结束</view>
      <view class="f1">
        <view class="input">
          会员结束
        </view>
      </view>
    </view>
    <view class="divider"></view>
    <view class="row">
      <view class="label">姓名</view>
      <view class="f1">
        <input class="input" placeholder="填写真实姓名" v-model="name" maxlength="5"/>
      </view>
    </view>
    <view class="divider"></view>
    <view class="row">
      <view class="label">身份证号</view>
      <view class="f1">
        <input class="input" placeholder="填写身份证号" v-model="idcard" maxlength="18"/>
      </view>
    </view>
    <view class="divider"></view>
    <view class="red">身份证仅用于核对考试成绩，信息严格保密，放心填写</view>
    <view class="tips_title">温馨提示</view>
    <view class="tips">
      （1）为保证您的权益请如实填写以上信息，上述信息填写后不可修改，请谨慎核对
    </view>
    <view class="tips">
      （2）一个身份证单科只能获得一次补偿，如因基本信息填写有误造成补偿失败，责任由填写人自行承担
    </view>
    <view class="tips">
      （3）请尽快填写基本信息，补偿服务才开始生效
    </view>
    <view @click="toSubmit" :class="['custom-btn input-container', canSubmitCardID? 'primary':'']">立即激活</view>
    <view class="protocol-container">
      <text class="title1">激活即表示同意</text>
      <text class="title2" @click="toProtocol">《用户协议》</text>
    </view>
  </view>
</template>
<script>
import Navbar from "@/components/navbar.vue";
import {commonApi} from "@/api";
import {mapGetters, mapActions} from 'vuex'
import day from "@/vendor/day";

export default {
  components: {Navbar},
  data() {
    return {
      name: '',
      idcard: ''
    }
  },
  computed: {
    ...mapGetters(['mine']),
    canSubmitCardID() {
      return this.name.length > 1 && this.idcard.length === 18
    }
  },
  methods: {
    ...mapActions(['refreshUser']),
    toProtocol() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=yonghu',
      });
    },
    async toSubmit() {
      if (this.name.length < 2) {
        uni.showToast({
          title: '姓名必须大于1个字！',
          icon: 'none',
          duration: 2000
        });
        return
      }
      if (this.idcard.length !== 18) {
        uni.showToast({
          title: '身份证号需要18位！',
          icon: 'none',
          duration: 2000
        });
        return
      }

      uni.showLoading({
        title: '加载中...',
      })
      try {
        await commonApi.uploadCard(this.name, this.idcard)
        await this.refreshUser()
        uni.showToast({
          title: '激活成功！',
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          uni.navigateBack()
        }, 2000)
      } catch (e) {
        uni.showToast({
          title: e.data.msg,
          icon: 'none',
          duration: 2000
        });
      }
    },
    toBack() {
      uni.navigateBack()
    },
  }
}
</script>

<style scoped lang="scss">
page {
  background: #fff;
}

.top-bar {
  .back {
    position: absolute;
    left: 30upx;
    width: 36upx;
    height: 36upx;
    align-self: center;
  }

  .title {
    font-weight: bold;
    font-size: 32upx;
    color: #FFFFFF;
  }
}

.kaobuguo_container {
  position: relative;
  display: flex;
  flex-direction: column;

  &.compensate_bg {
    background-color: #f5f6f8;
  }

  .bg {
    position: absolute;
    top: 0;
    width: 100%;
    background-image: url("https://down.qwdata.vip/app_icon/shunxu_bg.png");
    height: 1000rpx;
    background-size: cover;
    background-position: top;
  }

  .panel {
    background-color: #fff;
    margin: 0 30upx 30rpx 30upx;
    z-index: 1;
    padding: 30upx 30upx 50upx 30upx;
    border-radius: 20upx;
    display: flex;
    flex-direction: column;

    .main_title {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
      margin-top: 20rpx;
    }

    .question {
      margin-top: 40rpx;

      &:nth-child(2) {
        margin-top: 0;
      }

      .text {
        font-size: 16px;
        font-weight: bold;
      }

      .text2 {
        color: #888;
        margin-left: 10rpx;
        margin-top: 20rpx;
        line-height: 42rpx;
      }
    }

    .rule_item {
      display: flex;
      background-color: #ebf5ff;
      padding: 30rpx;
      padding-left: 0;
      border-radius: 20rpx;
      margin-bottom: 24rpx;

      .index {
        width: 90rpx;
        font-size: 30px;
        font-weight: bold;
        color: #3d8cef;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .body {
        flex: 1;

        .label {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8rpx;
        }

        .sub_label {
          color: #888;
        }
      }

      .btn {
        align-self: center;
        background-color: #f5d4b4;
        width: 140rpx;
        height: 60rpx;
        display: flex;
        margin-left: 10rpx;
        align-items: center;
        justify-content: center;
        border-radius: 100rpx;

        &.disable {
          background-color: #3274f6;
          color: #fff;
        }
      }
    }
  }

  .protocol-container {
    margin-top: 20rpx;
    margin-bottom: 30rpx;
    text-align: center;

    .title1 {
      font-size: 14px;
      color: #858585;
    }

    .title2 {
      font-size: 14px;
      color: #3274f6;
    }
  }

  .row {
    display: flex;
    height: 108rpx;
    padding: 0 30rpx;

    .label {
      align-self: center;
      font-size: 15px;
      font-weight: bold;
    }

    .input {
      width: 100%;
      text-align: right;
      line-height: 108rpx;
      height: 108rpx;
      font-size: 15px;
    }
  }

  .divider {
    background-color: #f0f0f0;
    height: 1px;
    margin: 0 30rpx;
  }

  .red {
    color: red;
    margin: 0 30rpx;
    line-height: 80rpx;
  }

  .tips_title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30rpx;
    margin-top: 20rpx;
  }

  .tips {
    color: #777;
    margin: 0 30rpx;
    line-height: 40rpx;
    margin-bottom: 20rpx;
  }

  .input-container {
    margin-top: 50rpx;
    margin-left: 40upx;
    margin-right: 40upx;
    background-color: #e0e0e0;
    color: #666;

    &.primary {
      background-color: #3073f6;
      color: #fff;
    }
  }

  .compensate {
    margin-top: 20rpx;
    background-color: #e0e0e0;
    color: #666;

    &.primary {
      background-color: #3073f6;
      color: #fff;
    }
  }
}
</style>
